<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>建材通 - 家居建材交易平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#0066cc',
                        secondary: '#ff6600',
                        neutral: {
                            100: '#f5f5f5',
                            200: '#e5e5e5',
                            300: '#d4d4d4',
                            400: '#a3a3a3',
                            500: '#737373',
                            600: '#525252',
                            700: '#404040',
                            800: '#262626',
                            900: '#171717',
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'custom': '0 4px 20px -2px rgba(0, 0, 0, 0.1)',
                        'card': '0 10px 15px -3px rgba(0, 0, 0, 0.08)',
                    }
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .tab-active {
                @apply text-primary border-b-2 border-primary;
            }
            .nav-active {
                @apply text-primary;
            }
            .btn-primary {
                @apply bg-primary text-white px-4 py-2 rounded-lg font-medium transition-all duration-300 hover:bg-primary/90 hover:shadow-lg transform hover:-translate-y-0.5;
            }
            .btn-secondary {
                @apply bg-white text-primary border border-primary px-4 py-2 rounded-lg font-medium transition-all duration-300 hover:bg-primary/5;
            }
            .btn-danger {
                @apply bg-red-500 text-white px-4 py-2 rounded-lg font-medium transition-all duration-300 hover:bg-red-600 hover:shadow-lg transform hover:-translate-y-0.5;
            }
            .card-hover {
                @apply transition-all duration-300 hover:shadow-card hover:-translate-y-1;
            }
            .animate-fade-in {
                animation: fadeIn 0.5s ease-in-out;
            }
            .animate-slide-up {
                animation: slideUp 0.4s ease-out;
            }
            .animate-pulse-slow {
                animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            }
            @keyframes fadeIn {
                from { opacity: 0; }
                to { opacity: 1; }
            }
            @keyframes slideUp {
                from { transform: translateY(20px); opacity: 0; }
                to { transform: translateY(0); opacity: 1; }
            }
        }
    </style>
</head>
<body class="bg-neutral-100 font-sans text-neutral-800 min-h-screen flex flex-col">
<!-- 顶部导航栏 -->
<header id="header" class="bg-white shadow-sm fixed top-0 left-0 right-0 z-50 transition-all duration-300">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
        <div class="flex items-center">
            <button id="menu-toggle" class="mr-4 text-neutral-700">
                <i class="fa-solid fa-bars text-xl"></i>
            </button>
            <div class="flex items-center">
                <i class="fa-solid fa-building text-primary mr-2"></i>
                <h1 class="text-xl font-bold text-primary">建材通</h1>
            </div>
        </div>
        <div class="flex items-center space-x-4">
            <button class="text-neutral-700 relative">
                <i class="fa-solid fa-bell text-xl"></i>
                <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">3</span>
            </button>
            <button class="text-neutral-700">
                <i class="fa-solid fa-search text-xl"></i>
            </button>
        </div>
    </div>
</header>

<!-- 侧边栏菜单 -->
<div id="sidebar" class="fixed inset-y-0 left-0 w-64 bg-white shadow-lg transform -translate-x-full transition-transform duration-300 ease-in-out z-50">
    <div class="p-4 border-b border-neutral-200">
        <div class="flex items-center">
            <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="w-12 h-12 rounded-full object-cover border-2 border-primary">
            <div class="ml-3">
                <p class="font-medium">张师傅</p>
                <p class="text-sm text-neutral-500">安装师傅</p>
            </div>
        </div>
    </div>
    <nav class="p-4">
        <ul class="space-y-1">
            <li>
                <a href="#" class="flex items-center p-2 rounded-lg bg-primary/10 text-primary">
                    <i class="fa-solid fa-home w-6"></i>
                    <span>首页</span>
                </a>
            </li>
            <li>
                <a href="#" class="flex items-center p-2 rounded-lg text-neutral-700 hover:bg-neutral-100 transition-colors">
                    <i class="fa-solid fa-list-alt w-6"></i>
                    <span>我的订单</span>
                </a>
            </li>
            <li>
                <a href="#" class="flex items-center p-2 rounded-lg text-neutral-700 hover:bg-neutral-100 transition-colors">
                    <i class="fa-solid fa-wallet w-6"></i>
                    <span>我的钱包</span>
                </a>
            </li>
            <li>
                <a href="#" class="flex items-center p-2 rounded-lg text-neutral-700 hover:bg-neutral-100 transition-colors">
                    <i class="fa-solid fa-star w-6"></i>
                    <span>我的评价</span>
                </a>
            </li>
            <li>
                <a href="#" class="flex items-center p-2 rounded-lg text-neutral-700 hover:bg-neutral-100 transition-colors">
                    <i class="fa-solid fa-cog w-6"></i>
                    <span>设置</span>
                </a>
            </li>
            <li>
                <a href="#" class="flex items-center p-2 rounded-lg text-neutral-700 hover:bg-neutral-100 transition-colors">
                    <i class="fa-solid fa-question-circle w-6"></i>
                    <span>帮助中心</span>
                </a>
            </li>
        </ul>
        <div class="mt-6 pt-6 border-t border-neutral-200">
            <a href="#" class="flex items-center p-2 rounded-lg text-red-500 hover:bg-red-50 transition-colors">
                <i class="fa-solid fa-sign-out-alt w-6"></i>
                <span>退出登录</span>
            </a>
        </div>
    </nav>
</div>

<!-- 主内容区域 -->
<main class="flex-grow pt-16 pb-20">
    <!-- 首页 -->
    <div id="home-page" class="animate-fade-in">
        <!-- 轮播图 -->
        <div class="relative overflow-hidden">
            <div class="carousel flex transition-transform duration-500 ease-in-out" style="transform: translateX(0);">
                <div class="carousel-item min-w-full">
                    <img src="https://picsum.photos/id/1067/800/300" alt="促销活动" class="w-full h-48 object-cover">
                </div>
                <div class="carousel-item min-w-full">
                    <img src="https://picsum.photos/id/1048/800/300" alt="新品上市" class="w-full h-48 object-cover">
                </div>
                <div class="carousel-item min-w-full">
                    <img src="https://picsum.photos/id/1060/800/300" alt="限时折扣" class="w-full h-48 object-cover">
                </div>
            </div>
            <div class="absolute bottom-3 left-1/2 transform -translate-x-1/2 flex space-x-2">
                <button class="w-2 h-2 rounded-full bg-white opacity-100"></button>
                <button class="w-2 h-2 rounded-full bg-white opacity-50"></button>
                <button class="w-2 h-2 rounded-full bg-white opacity-50"></button>
            </div>
        </div>

        <!-- 分类导航 -->
        <div class="bg-white p-4">
            <div class="grid grid-cols-4 gap-4">
                <a href="#" class="flex flex-col items-center">
                    <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-2">
                        <i class="fa-solid fa-bath text-primary text-xl"></i>
                    </div>
                    <span class="text-sm">卫浴洁具</span>
                </a>
                <a href="#" class="flex flex-col items-center">
                    <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mb-2">
                        <i class="fa-solid fa-tree text-green-600 text-xl"></i>
                    </div>
                    <span class="text-sm">地板门窗</span>
                </a>
                <a href="#" class="flex flex-col items-center">
                    <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mb-2">
                        <i class="fa-solid fa-lightbulb text-purple-600 text-xl"></i>
                    </div>
                    <span class="text-sm">灯具照明</span>
                </a>
                <a href="#" class="flex flex-col items-center">
                    <div class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center mb-2">
                        <i class="fa-solid fa-couch text-yellow-600 text-xl"></i>
                    </div>
                    <span class="text-sm">家具软装</span>
                </a>
                <a href="#" class="flex flex-col items-center">
                    <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mb-2">
                        <i class="fa-solid fa-paint-roller text-blue-600 text-xl"></i>
                    </div>
                    <span class="text-sm">油漆涂料</span>
                </a>
                <a href="#" class="flex flex-col items-center">
                    <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mb-2">
                        <i class="fa-solid fa-trowel text-red-600 text-xl"></i>
                    </div>
                    <span class="text-sm">瓷砖石材</span>
                </a>
                <a href="#" class="flex flex-col items-center">
                    <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mb-2">
                        <i class="fa-solid fa-plug text-indigo-600 text-xl"></i>
                    </div>
                    <span class="text-sm">电工电料</span>
                </a>
                <a href="#" class="flex flex-col items-center">
                    <div class="w-12 h-12 rounded-full bg-pink-100 flex items-center justify-center mb-2">
                        <i class="fa-solid fa-pencil-ruler text-pink-600 text-xl"></i>
                    </div>
                    <span class="text-sm">设计服务</span>
                </a>
            </div>
        </div>

        <!-- 今日推荐 -->
        <div class="px-4 py-6">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-lg font-bold">今日推荐</h2>
                <a href="#" class="text-primary text-sm">查看更多</a>
            </div>
            <div class="grid grid-cols-2 gap-4">
                <div class="bg-white rounded-xl overflow-hidden shadow-sm card-hover">
                    <img src="https://picsum.photos/id/1060/400/300" alt="瓷砖" class="w-full h-40 object-cover">
                    <div class="p-3">
                        <h3 class="font-medium text-neutral-800 truncate">现代简约防滑瓷砖</h3>
                        <div class="flex items-center mt-1">
                            <div class="text-yellow-400 text-xs flex">
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star-half-stroke"></i>
                            </div>
                            <span class="text-xs text-neutral-500 ml-1">(128)</span>
                        </div>
                        <div class="mt-2 flex items-center justify-between">
                            <span class="text-primary font-bold">¥128</span>
                            <span class="text-sm text-neutral-500 line-through">¥168</span>
                        </div>
                    </div>
                </div>
                <div class="bg-white rounded-xl overflow-hidden shadow-sm card-hover">
                    <img src="https://picsum.photos/id/1067/400/300" alt="卫浴" class="w-full h-40 object-cover">
                    <div class="p-3">
                        <h3 class="font-medium text-neutral-800 truncate">智能马桶一体机</h3>
                        <div class="flex items-center mt-1">
                            <div class="text-yellow-400 text-xs flex">
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                            </div>
                            <span class="text-xs text-neutral-500 ml-1">(86)</span>
                        </div>
                        <div class="mt-2 flex items-center justify-between">
                            <span class="text-primary font-bold">¥2899</span>
                            <span class="text-sm text-neutral-500 line-through">¥3299</span>
                        </div>
                    </div>
                </div>
                <div class="bg-white rounded-xl overflow-hidden shadow-sm card-hover">
                    <img src="https://picsum.photos/id/1048/400/300" alt="地板" class="w-full h-40 object-cover">
                    <div class="p-3">
                        <h3 class="font-medium text-neutral-800 truncate">强化复合木地板</h3>
                        <div class="flex items-center mt-1">
                            <div class="text-yellow-400 text-xs flex">
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-regular fa-star"></i>
                            </div>
                            <span class="text-xs text-neutral-500 ml-1">(64)</span>
                        </div>
                        <div class="mt-2 flex items-center justify-between">
                            <span class="text-primary font-bold">¥98</span>
                            <span class="text-sm text-neutral-500 line-through">¥128</span>
                        </div>
                    </div>
                </div>
                <div class="bg-white rounded-xl overflow-hidden shadow-sm card-hover">
                    <img src="https://picsum.photos/id/1062/400/300" alt="灯具" class="w-full h-40 object-cover">
                    <div class="p-3">
                        <h3 class="font-medium text-neutral-800 truncate">北欧风格吸顶灯</h3>
                        <div class="flex items-center mt-1">
                            <div class="text-yellow-400 text-xs flex">
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star-half-stroke"></i>
                            </div>
                            <span class="text-xs text-neutral-500 ml-1">(92)</span>
                        </div>
                        <div class="mt-2 flex items-center justify-between">
                            <span class="text-primary font-bold">¥369</span>
                            <span class="text-sm text-neutral-500 line-through">¥429</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 服务专区 -->
        <div class="px-4 py-6 bg-white">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-lg font-bold">服务专区</h2>
                <a href="#" class="text-primary text-sm">查看更多</a>
            </div>
            <div class="space-y-3">
                <div class="flex bg-neutral-50 rounded-xl overflow-hidden shadow-sm card-hover">
                    <img src="https://picsum.photos/id/1058/200/200" alt="设计服务" class="w-24 h-24 object-cover">
                    <div class="p-3 flex-grow">
                        <h3 class="font-medium">专业室内设计</h3>
                        <p class="text-sm text-neutral-500 mt-1">3D效果图/全屋定制/免费量房</p>
                        <div class="mt-2 flex items-center justify-between">
                            <span class="text-primary font-bold">¥299起</span>
                            <button class="btn-primary text-xs px-3 py-1">立即预约</button>
                        </div>
                    </div>
                </div>
                <div class="flex bg-neutral-50 rounded-xl overflow-hidden shadow-sm card-hover">
                    <img src="https://picsum.photos/id/1059/200/200" alt="安装服务" class="w-24 h-24 object-cover">
                    <div class="p-3 flex-grow">
                        <h3 class="font-medium">家具安装服务</h3>
                        <p class="text-sm text-neutral-500 mt-1">专业师傅/上门安装/售后保障</p>
                        <div class="mt-2 flex items-center justify-between">
                            <span class="text-primary font-bold">¥50起</span>
                            <button class="btn-primary text-xs px-3 py-1">立即预约</button>
                        </div>
                    </div>
                </div>
                <div class="flex bg-neutral-50 rounded-xl overflow-hidden shadow-sm card-hover">
                    <img src="https://picsum.photos/id/1061/200/200" alt="送货服务" class="w-24 h-24 object-cover">
                    <div class="p-3 flex-grow">
                        <h3 class="font-medium">大件家具配送</h3>
                        <p class="text-sm text-neutral-500 mt-1">同城配送/专业搬运/破损包赔</p>
                        <div class="mt-2 flex items-center justify-between">
                            <span class="text-primary font-bold">¥30起</span>
                            <button class="btn-primary text-xs px-3 py-1">立即预约</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 热门活动 -->
        <div class="px-4 py-6">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-lg font-bold">热门活动</h2>
                <a href="#" class="text-primary text-sm">查看更多</a>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="bg-gradient-to-r from-blue-500 to-indigo-600 rounded-xl overflow-hidden shadow-sm card-hover">
                    <div class="p-4">
                        <h3 class="text-white font-bold">618大促</h3>
                        <p class="text-blue-100 text-sm mt-1">全场低至5折起</p>
                        <div class="mt-3 flex space-x-2">
                            <div class="bg-white text-blue-600 rounded px-2 py-1 text-xs font-medium">05</div>
                            <span class="text-white text-xs">:</span>
                            <div class="bg-white text-blue-600 rounded px-2 py-1 text-xs font-medium">42</div>
                            <span class="text-white text-xs">:</span>
                            <div class="bg-white text-blue-600 rounded px-2 py-1 text-xs font-medium">18</div>
                        </div>
                        <button class="mt-4 bg-white text-blue-600 text-sm px-3 py-1 rounded-lg">立即抢购</button>
                    </div>
                </div>
                <div class="bg-gradient-to-r from-orange-500 to-red-600 rounded-xl overflow-hidden shadow-sm card-hover">
                    <div class="p-4">
                        <h3 class="text-white font-bold">设计师推荐</h3>
                        <p class="text-orange-100 text-sm mt-1">精选搭配套餐</p>
                        <img src="https://picsum.photos/id/1068/100/100" alt="设计师推荐" class="mt-2 rounded-lg w-20 h-20 object-cover">
                        <button class="mt-4 bg-white text-orange-600 text-sm px-3 py-1 rounded-lg">查看详情</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 跟单员页面 -->
    <div id="order-page" class="hidden animate-fade-in">
        <!-- 订单标签页 -->
        <div class="bg-white border-b border-neutral-200">
            <div class="flex">
                <button class="flex-1 py-3 text-center tab-active">待抢单</button>
                <button class="flex-1 py-3 text-center text-neutral-500">进行中</button>
                <button class="flex-1 py-3 text-center text-neutral-500">已完成</button>
            </div>
        </div>

        <!-- 待抢单列表 -->
        <div class="px-4 py-3">
            <div class="space-y-3">
                <div class="bg-white rounded-xl shadow-sm p-4 card-hover animate-slide-up">
                    <div class="flex justify-between items-start">
                        <div>
                            <h3 class="font-medium">现代简约风格全屋定制</h3>
                            <p class="text-sm text-neutral-500 mt-1">订单编号: OD20250615001</p>
                        </div>
                        <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">待抢单</span>
                    </div>
                    <div class="mt-3 flex items-center text-sm text-neutral-600">
                        <i class="fa-solid fa-map-marker-alt text-primary mr-1"></i>
                        <span>北京市朝阳区建国路88号</span>
                    </div>
                    <div class="mt-2 flex items-center text-sm text-neutral-600">
                        <i class="fa-solid fa-calendar-alt text-primary mr-1"></i>
                        <span>预约时间: 2025-06-16 10:00</span>
                    </div>
                    <div class="mt-3 flex justify-between items-center">
                        <div>
                            <span class="text-primary font-bold">¥2,500</span>
                            <span class="text-sm text-neutral-500">跟单佣金</span>
                        </div>
                        <button class="btn-primary text-sm">立即抢单</button>
                    </div>
                </div>
                <div class="bg-white rounded-xl shadow-sm p-4 card-hover animate-slide-up" style="animation-delay: 0.1s;">
                    <div class="flex justify-between items-start">
                        <div>
                            <h3 class="font-medium">小户型厨房改造</h3>
                            <p class="text-sm text-neutral-500 mt-1">订单编号: OD20250615002</p>
                        </div>
                        <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">待抢单</span>
                    </div>
                    <div class="mt-3 flex items-center text-sm text-neutral-600">
                        <i class="fa-solid fa-map-marker-alt text-primary mr-1"></i>
                        <span>上海市浦东新区张江高科技园区</span>
                    </div>
                    <div class="mt-2 flex items-center text-sm text-neutral-600">
                        <i class="fa-solid fa-calendar-alt text-primary mr-1"></i>
                        <span>预约时间: 2025-06-17 14:30</span>
                    </div>
                    <div class="mt-3 flex justify-between items-center">
                        <div>
                            <span class="text-primary font-bold">¥1,200</span>
                            <span class="text-sm text-neutral-500">跟单佣金</span>
                        </div>
                        <button class="btn-primary text-sm">立即抢单</button>
                    </div>
                </div>
                <div class="bg-white rounded-xl shadow-sm p-4 card-hover animate-slide-up" style="animation-delay: 0.2s;">
                    <div class="flex justify-between items-start">
                        <div>
                            <h3 class="font-medium">卫浴洁具更换</h3>
                            <p class="text-sm text-neutral-500 mt-1">订单编号: OD20250615003</p>
                        </div>
                        <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">待抢单</span>
                    </div>
                    <div class="mt-3 flex items-center text-sm text-neutral-600">
                        <i class="fa-solid fa-map-marker-alt text-primary mr-1"></i>
                        <span>广州市天河区珠江新城</span>
                    </div>
                    <div class="mt-2 flex items-center text-sm text-neutral-600">
                        <i class="fa-solid fa-calendar-alt text-primary mr-1"></i>
                        <span>预约时间: 2025-06-18 09:00</span>
                    </div>
                    <div class="mt-3 flex justify-between items-center">
                        <div>
                            <span class="text-primary font-bold">¥800</span>
                            <span class="text-sm text-neutral-500">跟单佣金</span>
                        </div>
                        <button class="btn-primary text-sm">立即抢单</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 师傅页面 -->
    <div id="master-page" class="hidden animate-fade-in">
        <!-- 顶部状态切换 -->
        <div class="bg-white p-4">
            <div class="flex items-center justify-between">
                <h2 class="font-bold text-lg">今日接单</h2>
                <div class="flex items-center">
                    <span class="text-neutral-600 mr-2">工作状态:</span>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" value="" class="sr-only peer" checked>
                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary/30 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                        <span class="ml-2 text-sm font-medium text-green-600">在线接单</span>
                    </label>
                </div>
            </div>
            <div class="mt-4 flex space-x-3">
                <button class="flex-1 py-2 bg-primary text-white rounded-lg">全部订单</button>
                <button class="flex-1 py-2 bg-white text-neutral-600 rounded-lg border border-neutral-200">待服务</button>
                <button class="flex-1 py-2 bg-white text-neutral-600 rounded-lg border border-neutral-200">进行中</button>
            </div>
        </div>

        <!-- 今日统计 -->
        <div class="px-4 py-3 bg-neutral-50">
            <div class="grid grid-cols-3 gap-3">
                <div class="bg-white rounded-lg p-3 text-center">
                    <p class="text-sm text-neutral-500">今日接单</p>
                    <p class="text-2xl font-bold text-primary mt-1">5</p>
                </div>
                <div class="bg-white rounded-lg p-3 text-center">
                    <p class="text-sm text-neutral-500">已完成</p>
                    <p class="text-2xl font-bold text-green-600 mt-1">3</p>
                </div>
                <div class="bg-white rounded-lg p-3 text-center">
                    <p class="text-sm text-neutral-500">收入</p>
                    <p class="text-2xl font-bold text-orange-500 mt-1">¥850</p>
                </div>
            </div>
        </div>

        <!-- 订单列表 -->
        <div class="px-4 py-3">
            <div class="space-y-3">
                <div class="bg-white rounded-xl shadow-sm p-4 card-hover">
                    <div class="flex justify-between items-start">
                        <div>
                            <h3 class="font-medium">地板安装服务</h3>
                            <p class="text-sm text-neutral-500 mt-1">订单编号: OD20250615005</p>
                        </div>
                        <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">待服务</span>
                    </div>
                    <div class="mt-3 flex items-center text-sm text-neutral-600">
                        <i class="fa-solid fa-map-marker-alt text-primary mr-1"></i>
                        <span>北京市海淀区中关村南大街5号</span>
                    </div>
                    <div class="mt-2 flex items-center text-sm text-neutral-600">
                        <i class="fa-solid fa-calendar-alt text-primary mr-1"></i>
                        <span>预约时间: 2025-06-15 14:00</span>
                    </div>
                    <div class="mt-3 flex justify-between items-center">
                        <div>
                            <span class="text-primary font-bold">¥350</span>
                            <span class="text-sm text-neutral-500">服务费用</span>
                        </div>
                        <button class="btn-primary text-sm">开始服务</button>
                    </div>
                </div>
                <div class="bg-white rounded-xl shadow-sm p-4 card-hover">
                    <div class="flex justify-between items-start">
                        <div>
                            <h3 class="font-medium">灯具更换服务</h3>
                            <p class="text-sm text-neutral-500 mt-1">订单编号: OD20250615006</p>
                        </div>
                        <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">进行中</span>
                    </div>
                    <div class="mt-3 flex items-center text-sm text-neutral-600">
                        <i class="fa-solid fa-map-marker-alt text-primary mr-1"></i>
                        <span>北京市朝阳区建国路88号</span>
                    </div>
                    <div class="mt-2 flex items-center text-sm text-neutral-600">
                        <i class="fa-solid fa-calendar-alt text-primary mr-1"></i>
                        <span>预约时间: 2025-06-15 10:00</span>
                    </div>
                    <div class="mt-3 flex justify-between items-center">
                        <div>
                            <span class="text-primary font-bold">¥150</span>
                            <span class="text-sm text-neutral-500">服务费用</span>
                        </div>
                        <button class="btn-secondary text-sm">完成服务</button>
                    </div>
                </div>
                <div class="bg-white rounded-xl shadow-sm p-4 card-hover">
                    <div class="flex justify-between items-start">
                        <div>
                            <h3 class="font-medium">卫浴安装服务</h3>
                            <p class="text-sm text-neutral-500 mt-1">订单编号: OD20250615004</p>
                        </div>
                        <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">已完成</span>
                    </div>
                    <div class="mt-3 flex items-center text-sm text-neutral-600">
                        <i class="fa-solid fa-map-marker-alt text-primary mr-1"></i>
                        <span>北京市丰台区方庄路1号</span>
                    </div>
                    <div class="mt-2 flex items-center text-sm text-neutral-600">
                        <i class="fa-solid fa-calendar-alt text-primary mr-1"></i>
                        <span>预约时间: 2025-06-15 09:00</span>
                    </div>
                    <div class="mt-3 flex justify-between items-center">
                        <div>
                            <span class="text-primary font-bold">¥350</span>
                            <span class="text-sm text-neutral-500">服务费用</span>
                        </div>
                        <div class="text-yellow-400 text-sm flex">
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="merchant-page" class="hidden animate-fade-in">
        <!-- 我的页面 -->
        <div id="profile-page" class="hidden animate-fade-in">
            <!-- 个人信息 -->
            <div class="bg-gradient-to-r from-primary to-indigo-600 p-6 text-white">
                <div class="flex items-center">
                    <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="w-16 h-16 rounded-full object-cover border-2 border-white">
                    <div class="ml-4">
                        <h2 class="font-bold text-lg">张师傅</h2>
                        <p class="text-white/80 text-sm mt-1">安装师傅</p>
                    </div>
                    <button class="ml-auto">
                        <i class="fa-solid fa-cog text-white/80"></i>
                    </button>
                </div>
                <div class="mt-6 grid grid-cols-3 gap-4 text-center">
                    <div>
                        <p class="text-xl font-bold">42</p>
                        <p class="text-white/80 text-sm mt-1">完成订单</p>
                    </div>
                    <div>
                        <p class="text-xl font-bold">4.9</p>
                        <p class="text-white/80 text-sm mt-1">平均评分</p>
                    </div>
                    <div>
                        <p class="text-xl font-bold">¥8,650</p>
                        <p class="text-white/80 text-sm mt-1">总收入</p>
                    </div>
                </div>
            </div>

            <!-- 我的钱包 -->
            <div class="bg-white p-4 mt-3">
                <div class="flex items-center justify-between">
                    <h3 class="font-medium">我的钱包</h3>
                    <button class="text-primary text-sm">提现</button>
                </div>
                <div class="mt-3 flex items-center">
                    <span class="text-2xl font-bold">¥3,250.00</span>
                    <span class="text-sm text-neutral-500 ml-2">可提现金额</span>
                </div>
                <div class="mt-4 grid grid-cols-4 gap-2 text-center">
                    <a href="#" class="p-2 rounded-lg hover:bg-neutral-50">
                        <i class="fa-solid fa-wallet text-primary text-xl"></i>
                        <p class="text-xs mt-1">账户余额</p>
                    </a>
                    <a href="#" class="p-2 rounded-lg hover:bg-neutral-50">
                        <i class="fa-solid fa-history text-primary text-xl"></i>
                        <p class="text-xs mt-1">提现记录</p>
                    </a>
                    <a href="#" class="p-2 rounded-lg hover:bg-neutral-50">
                        <i class="fa-solid fa-credit-card text-primary text-xl"></i>
                        <p class="text-xs mt-1">银行卡</p>
                    </a>
                    <a href="#" class="p-2 rounded-lg hover:bg-neutral-50">
                        <i class="fa-solid fa-question-circle text-primary text-xl"></i>
                        <p class="text-xs mt-1">帮助</p>
                    </a>
                </div>
            </div>

            <!-- 我的订单 -->
            <div class="bg-white p-4 mt-3">
                <div class="flex items-center justify-between">
                    <h3 class="font-medium">我的订单</h3>
                    <a href="#" class="text-primary text-sm">查看全部</a>
                </div>
                <div class="mt-3 flex space-x-2">
                    <a href="#" class="flex-1 text-center py-2 border-b-2 border-primary text-primary">全部</a>
                    <a href="#" class="flex-1 text-center py-2 border-b-2 border-transparent text-neutral-500">待服务</a>
                    <a href="#" class="flex-1 text-center py-2 border-b-2 border-transparent text-neutral-500">进行中</a>
                    <a href="#" class="flex-1 text-center py-2 border-b-2 border-transparent text-neutral-500">已完成</a>
                </div>
                <div class="mt-3 space-y-3">
                    <div class="border border-neutral-200 rounded-lg p-3">
                        <div class="flex justify-between">
                            <span class="font-medium">地板安装服务</span>
                            <span class="text-green-500 text-sm">已完成</span>
                        </div>
                        <div class="mt-2 flex justify-between text-sm text-neutral-500">
                            <span>订单编号: OD20250612001</span>
                            <span>2025-06-12</span>
                        </div>
                        <div class="mt-2 flex justify-between items-center">
                            <span class="text-primary font-bold">¥350</span>
                            <button class="text-sm border border-primary text-primary px-3 py-1 rounded-lg">查看详情</button>
                        </div>
                    </div>
                    <div class="border border-neutral-200 rounded-lg p-3">
                        <div class="flex justify-between">
                            <span class="font-medium">灯具更换服务</span>
                            <span class="text-blue-500 text-sm">进行中</span>
                        </div>
                        <div class="mt-2 flex justify-between text-sm text-neutral-500">
                            <span>订单编号: OD20250613002</span>
                            <span>2025-06-13</span>
                        </div>
                        <div class="mt-2 flex justify-between items-center">
                            <span class="text-primary font-bold">¥150</span>
                            <button class="text-sm border border-primary text-primary px-3 py-1 rounded-lg">查看详情</button>
                        </div>
                    </div>
                    <div class="border border-neutral-200 rounded-lg p-3">
                        <div class="flex justify-between">
                            <span class="font-medium">卫浴安装服务</span>
                            <span class="text-yellow-500 text-sm">待服务</span>
                        </div>
                        <div class="mt-2 flex justify-between text-sm text-neutral-500">
                            <span>订单编号: OD20250614003</span>
                            <span>2025-06-14</span>
                        </div>
                        <div class="mt-2 flex justify-between items-center">
                            <span class="text-primary font-bold">¥350</span>
                            <button class="text-sm border border-primary text-primary px-3 py-1 rounded-lg">查看详情</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 服务类别 -->
            <div class="bg-white p-4 mt-3">
                <h3 class="font-medium">我的服务</h3>
                <div class="mt-3 grid grid-cols-3 gap-3">
                    <div class="p-3 bg-neutral-50 rounded-lg text-center">
                        <i class="fa-solid fa-trowel text-primary text-xl"></i>
                        <p class="text-sm mt-2">卫浴安装</p>
                    </div>
                    <div class="p-3 bg-neutral-50 rounded-lg text-center">
                        <i class="fa-solid fa-couch text-primary text-xl"></i>
                        <p class="text-sm mt-2">家具安装</p>
                    </div>
                    <div class="p-3 bg-neutral-50 rounded-lg text-center">
                        <i class="fa-solid fa-paint-roller text-primary text-xl"></i>
                        <p class="text-sm mt-2">墙面处理</p>
                    </div>
                    <div class="p-3 bg-neutral-50 rounded-lg text-center">
                        <i class="fa-solid fa-lightbulb text-primary text-xl"></i>
                        <p class="text-sm mt-2">灯具安装</p>
                    </div>
                    <div class="p-3 bg-neutral-50 rounded-lg text-center">
                        <i class="fa-solid fa-tree text-primary text-xl"></i>
                        <p class="text-sm mt-2">地板安装</p>
                    </div>
                    <div class="p-3 bg-neutral-50 rounded-lg text-center">
                        <i class="fa-solid fa-plus text-primary text-xl"></i>
                        <p class="text-sm mt-2">添加服务</p>
                    </div>
                </div>
            </div>

            <!-- 其他功能 -->
            <div class="bg-white p-4 mt-3">
                <h3 class="font-medium">更多功能</h3>
                <div class="mt-3 space-y-4">
                    <a href="#" class="flex items-center">
                        <i class="fa-solid fa-star text-primary mr-3"></i>
                        <span>我的评价</span>
                        <i class="fa-solid fa-angle-right text-neutral-400 ml-auto"></i>
                    </a>
                    <a href="#" class="flex items-center">
                        <i class="fa-solid fa-bell text-primary mr-3"></i>
                        <span>消息通知</span>
                        <i class="fa-solid fa-angle-right text-neutral-400 ml-auto"></i>
                    </a>
                    <a href="#" class="flex items-center">
                        <i class="fa-solid fa-question-circle text-primary mr-3"></i>
                        <span>帮助中心</span>
                        <i class="fa-solid fa-angle-right text-neutral-400 ml-auto"></i>
                    </a>
                    <a href="#" class="flex items-center">
                        <i class="fa-solid fa-user-circle text-primary mr-3"></i>
                        <span>关于我们</span>
                        <i class="fa-solid fa-angle-right text-neutral-400 ml-auto"></i>
                    </a>
                </div>
            </div>
        </div>
</main>

<!-- 底部导航 -->
<footer class="fixed bottom-0 left-0 right-0 bg-white border-t border-neutral-200 z-40">
    <div class="grid grid-cols-5 h-16">
        <a href="#home-page" id="nav-home" class="flex flex-col items-center justify-center nav-active">
            <i class="fa-solid fa-home text-xl"></i>
            <span class="text-xs mt-1">首页</span>
        </a>
        <a href="#order-page" id="nav-order" class="flex flex-col items-center justify-center text-neutral-500">
            <i class="fa-solid fa-list-alt text-xl"></i>
            <span class="text-xs mt-1">跟单员</span>
        </a>
        <a href="#master-page" id="nav-master" class="flex flex-col items-center justify-center text-neutral-500">
            <i class="fa-solid fa-user text-xl"></i>
            <span class="text-xs mt-1">师傅</span>
        </a>
        <a href="#merchant-page" id="nav-merchant" class="flex flex-col items-center justify-center text-neutral-500">
            <i class="fa-solid fa-user text-xl"></i>
            <span class="text-xs mt-1">商家</span>
        </a>

        <a href="#profile-page" id="nav-profile" class="flex flex-col items-center justify-center text-neutral-500">
            <i class="fa-solid fa-user-circle text-xl"></i>
            <span class="text-xs mt-1">我的</span>
        </a>
    </div>
</footer>

<!-- 遮罩层 -->
<div id="overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden"></div>

<script>
    // 导航切换
    document.addEventListener('DOMContentLoaded', function() {
        const navLinks = document.querySelectorAll('footer a');
        const pages = document.querySelectorAll('main > div');
        const menuToggle = document.getElementById('menu-toggle');
        const sidebar = document.getElementById('sidebar');
        const overlay = document.getElementById('overlay');

        // 导航切换事件
        navLinks.forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();

                // 移除所有导航项的活跃状态
                navLinks.forEach(item => {
                    item.classList.remove('nav-active');
                    item.classList.add('text-neutral-500');
                });

                // 添加当前导航项的活跃状态
                this.classList.add('nav-active');
                this.classList.remove('text-neutral-500');

                // 隐藏所有页面
                pages.forEach(page => {
                    page.classList.add('hidden');
                });

                // 显示对应页面
                const targetId = this.getAttribute('href').substring(1);
                const targetPage = document.getElementById(targetId);
                if (targetPage) {
                    targetPage.classList.remove('hidden');
                }
            });
        });

        // 侧边栏切换
        menuToggle.addEventListener('click', function() {
            sidebar.classList.toggle('-translate-x-full');
            overlay.classList.toggle('hidden');
        });

        overlay.addEventListener('click', function() {
            sidebar.classList.add('-translate-x-full');
            overlay.classList.add('hidden');
        });

        // 轮播图自动切换
        let currentSlide = 0;
        const slides = document.querySelectorAll('.carousel-item');
        const slideCount = slides.length;

        function showSlide(index) {
            const carousel = document.querySelector('.carousel');
            carousel.style.transform = `translateX(-${index * 100}%)`;

            // 更新指示器
            const indicators = document.querySelectorAll('.carousel + div button');
            indicators.forEach((indicator, i) => {
                indicator.classList.remove('opacity-100');
                indicator.classList.add('opacity-50');
                if (i === index) {
                    indicator.classList.remove('opacity-50');
                    indicator.classList.add('opacity-100');
                }
            });
        }

        function nextSlide() {
            currentSlide = (currentSlide + 1) % slideCount;
            showSlide(currentSlide);
        }

        // 自动轮播
        let slideInterval = setInterval(nextSlide, 3000);

        // 点击指示器切换轮播图
        const indicators = document.querySelectorAll('.carousel + div button');
        indicators.forEach((indicator, index) => {
            indicator.addEventListener('click', () => {
                clearInterval(slideInterval);
                currentSlide = index;
                showSlide(currentSlide);
                slideInterval = setInterval(nextSlide, 3000);
            });
        });

        // 滚动时导航栏效果
        const header = document.getElementById('header');
        let lastScrollTop = 0;

        window.addEventListener('scroll', () => {
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

            if (scrollTop > 10) {
                header.classList.add('shadow-md');
                header.classList.remove('shadow-sm');
            } else {
                header.classList.remove('shadow-md');
                header.classList.add('shadow-sm');
            }

            lastScrollTop = scrollTop;
        });
    });
</script>
</body>
</html>